<template>
<div>
    <el-steps :active="active" finish-status="success">
        <el-step  v-for="temp in questions" :key="temp.id"></el-step>
    </el-steps>
     <el-button style="margin-top: 12px;margin-buttom: 12px;" @click="before">上一题</el-button>
    <el-button style="margin-top: 12px; float:right;margin-buttom: 12px;" @click="next11">下一题</el-button> 
    <div style="color:red;">
        <count-down  
        :currentTime="currentTime" :startTime="currentTime" 
        :endTime="endTime" :tipText="'距离开始文字1'" 
        :tipTextEnd="'距离结束文字1'" 
        :endText="'结束自定义文字2'" 
        :minutesTxt="'分钟'" 
        :secondsTxt="'秒'">
        </count-down>
    </div> 
  <div class="block111">
    <el-carousel :model="submitPaper" ref="carousel" trigger="click" style="width:100%;height:609px" :autoplay="false" arrow="never" indicator-position="none">
      <el-carousel-item v-for="(item,index) in questions" :key="item.id" style="height:609px">
        <h1>第{{ index+1 }}题:</h1>
        <!-- <h3>{{ item.content }}</h3> -->
        <el-input type='textarea' v-model="item.content" rows="8" readonly></el-input>
        <h1 style="margin-top:30px">答案:</h1>
        <template>
              <div v-if="item.questionType.id==1" style="display:block;text-align:center;margin:0 auto">
                <el-radio v-model="item.submitAnswer" size="medium" label="A">A</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="B">B</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="C">C</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="D">D</el-radio>
              </div>
        </template>
        <div v-if="item.questionType.id==2" style="margin-top:30px">
            <el-input type='textarea' v-model="item.submitAnswer"  rows="10" clearable></el-input>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-button type="danger" style="display:block;text-align:center;margin:0 auto;" @click="open()" round>交卷</el-button> 
  </div>
</div>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
    height: 95%;
  }
  .block111{
      width:100%;
      height:100%;
  }
</style>
<script>
import CountDown from 'vue2-countdown'
export default {
        data() {
            let endTime = (new Date()).getTime()+this.$store.state.examTime*60*1000;
            return {
                classId:new Object(),
                isUnAnswer: false,
                submitPaper : new Object(),
                userId : this.$store.state.userId,
                questions: new Array(),
                paperName: '',
                active:1,
                currentTime:(new Date()).getTime(),
                examTime: this.$store.state.examTime,
                endTime,
                questionsLength: new Object()
            }
        },
        mounted() {
            this.init();
        },
        components: {
            CountDown
            },
        methods: {
            init(){
                this.$http.get('/api/accounts/'+this.userId).then(res => {
                    console.info(res);
                    this.questions=res.data.studentCla.exam.paper.questions;
                    this.questionsLength = this.questions.length;
                    this.paperName = res.data.studentCla.exam.paper.name;
                    this.classId = res.data.studentCla.id;
                })
            },
            next11() {
                if (this.active++ > this.questionsLength) this.active = 1;
                this.$refs.carousel.next();
            },
            before() {
                if (this.active-- < 0) this.active = 1;
                this.$refs.carousel.prev();
            },
            open(){
                this.questions.forEach(v => {
                    if(v.submitAnswer == "" || typeof(v.submitAnswer) == "undefined")
                    {
                        this.isUnAnswer = true;
                    }
                })
                if(this.isUnAnswer)
                {
                    this.$confirm('存在没做的试题,确定要交卷吗?','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.submit();
                    }).catch(() => {

                    })
                }else{
                    this.$confirm('确定要交卷吗?','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.submit();
                    }).catch(() => {

                    })
                }
                
            },
            submit()
            {
                this.$http.post('/api/Submit/'+this.userId+'?paperName='+this.paperName+'&classId='+this.classId,this.questions).then(res => {
                    if(res.status == 200)
                    {
                        this.$notify({type:'success',title:'成功',message:'交卷成功'}) ;
                        this.$store.commit("setIsfinishedExam", '1');
                        this.$router.push({ path: "/goExamination" });
                    }
                })
            }
        }
    }
</script>